<template>
	<div class="personInCharge">
		<!--    伪选择框-->
		<div class="personInCharge-box"
			:class="[selectType == true?'personInCharge-box-border-choose':'personInCharge-box-border']">
			<span class="personInCharge-box-title"
				v-if="personInChargeForm == null && collaboratorsForm.length == 0">指派负责人/协作者</span>
			<div class="personInCharge-content">
				<span class="personInCharge-content-label" v-if="personInChargeForm">负责人：</span>
				<div class="personInCharge-content-item" v-if="personInChargeForm">
					<el-image :src="personInChargeForm.avatar" class="personInCharge-content-item-logo"></el-image>
					<span class="personInCharge-content-item-title">{{personInChargeForm.userName}}</span>
				</div>
				<span class="personInCharge-content-label" v-if="collaboratorsForm.length > 0">协作者：</span>
				<div class="personInCharge-content-item"
					v-if="collaboratorsForm.length > 0 && collaboratorsForm.length <= 1">
					<el-image :src="collaboratorsForm[0].avatar" class="personInCharge-content-item-logo"></el-image>
					<span class="personInCharge-content-item-title">{{collaboratorsForm[0].userName}}</span>
				</div>
				<div class="personInCharge-content-logo-box" v-if="collaboratorsForm.length > 1">
					<div v-for="(item,index) in collaboratorsForm" v-if="index <=2">
						<el-image :src="item.avatar" class="personInCharge-content-item-logo"></el-image>
					</div>
					<span class="personInCharge-content-logo-box-title"
						v-if="collaboratorsForm.length - 3 > 0">+{{collaboratorsForm.length - 3}}</span>
				</div>
			</div>
			<i class="personInCharge-box-icon el-icon-arrow-down"
				:class="[selectType == false?'transformIconChoose':'transformIcon']"></i>
		</div>
		<el-select ref="personInChargeSelect" style="width: 100%" v-model="selectTitle" @visible-change="visibleChange"
			size="medium" placeholder="请选择">
			<template slot="empty">
				<div class="select">
					<div class="select-search">
						<el-input size="small" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="queryInput"
							@input="inputClick">
						</el-input>
					</div>
					<div v-for="(group,groupIndex) in options">
						<div class="select-header" @click="groupClick(group)">
							<div class="select-header-left">
								<span class="select-header-title">{{ group.termName }}</span>
								<i class="task-header-actions-icon el-icon-refresh"
									v-if="inputLoading == true && group.type == true"
									:class="[inputLoading == true?'refreshRe':'']"></i>
								<span class="select-header-number" v-else>({{group.userList.length}})</span>
							</div>
							<i class="iconfont icon-xia"
								:class="[group.type==true?'select-header-icon':'select-header-iconTwo']"></i>
						</div>
						<template v-if="group.type == true">
							<div :class="[item.type == true || groupIndexs == groupIndex && itemIndex == index?'select-item-choose':'select-item']"
								v-for="(item,index) in group.userList">
								<div class="select-item-left">
									<el-image class="select-item-logo" :src="item.avatar"></el-image>
									<span class="select-item-title">{{item.userName}}</span>
								</div>
								<div class="select-item-right">
									<el-tag class="select-item-right-tags"
										:type="groupIndexs == groupIndex && itemIndex == index?'info':''" size="small"
										effect="plain" @click="groupItemClick(item,index,groupIndex,'personInCharge')">
										负责人
									</el-tag>
									<el-tag class="select-item-right-tags" size="small"
										:type="item.type == true?'info':'success'" effect="plain"
										@click="groupItemClick(item,index,groupIndex,'collaborators')">协作者
									</el-tag>
								</div>
							</div>
						</template>
					</div>
					<el-empty description="暂无数据" :image-size="40" v-if="options.length == 0"></el-empty>
				</div>
			</template>
		</el-select>
	</div>
</template>
<script>
	import { getTreeData } from '@/api/termuser.js'
	export default {
		data() {
			return {
				options: [],
				selectTitle: '',
				queryInput: '',
				inputLoading: false,
				itemIndex: -1,
				groupIndexs: -1,
				personInChargeIndex: -1,
				selectType: false,
				personInChargeForm: null,
				collaboratorsForm: [],
				personprojId:""
			}
		},
		created() {
			this.personprojId=this.projId
		},
		props:['master','userList','projId'],
		watch:{
			projId(newval,oldval){
				if(this.personprojId == newval){
					return
				}
				this.personprojId=newval
				this.personInChargeForm = null
				this.collaboratorsForm = []
				this.itemIndex= -1
				this.groupIndexs= -1,
				this.personInChargeIndex= -1,
				this.loadList()
			},
			master:{
				handler(val, oldval) {
					console.log(val)
					if(val){
						this.personInChargeForm = val
					}
				},
				// 深度观察监听
				deep: true,
				immediate:true
			},
			userList:{
				handler(val,oldval){
					if(val){
						this.collaboratorsForm = val
						console.log(val)
						console.log('userList')
					}
				},
				deep:true,
				immediate:true
			}
		},
		methods: {

			// 获取团队list
			loadList(data){
				var _this = this
				var userName = ''
				if(data){
					userName = data
				}
				getTreeData({userName:userName,projId:this.personprojId}).then(res=>{
					console.log(res)
					console.log('团队')
					console.log(this.collaboratorsForm)
					res.data.forEach(function(item,index){
						if(index == 0){
							item.type = true
						}else{
							item.type = false
						}
						if(item.userList.length > 0){
							item.userList.forEach(function(items,indexs){
								items.type = false
								if(_this.personInChargeForm){
									if(items.userId == _this.personInChargeForm.userId){
										_this.itemIndex = indexs
										_this.groupIndexs = index
									}
								}
								if(_this.collaboratorsForm){
									_this.collaboratorsForm.forEach(function(userItem){
										if(items.userId == userItem.userId){
											items.type = true
										}
									})
								}
							})
						}
					})
					_this.options = res.data
				})
			},
			// 过滤状态
			groupClick(item) {
				item.type = !item.type
			},
			groupItemClick(item, index, groupIndex, type) {
				var _this = this
				if (type == 'personInCharge') {
					if (_this.itemIndex == index && _this.groupIndexs == groupIndex) {
						_this.itemIndex = -1
						_this.groupIndexs = -1
						_this.personInChargeForm = null
						_this.filterClick()
					} else {
						_this.itemIndex = index
						_this.groupIndexs = groupIndex
						item.type = false
						_this.personInChargeForm = item
						_this.filterClick()
					}
				} else {
					if (_this.itemIndex == index && _this.groupIndexs == groupIndex) {
						_this.itemIndex = -1
						_this.groupIndexs = -1
						_this.personInChargeForm = null
						item.type = true
						_this.filterClick()
					} else {
						item.type = !item.type
						_this.filterClick()
					}
				}
				console.log(_this.personInChargeForm)
			},
			filterClick() {
				var _this = this
				var data = []
				_this.options.forEach(function(item) {
					if (item.type == true) {
						item.userList.forEach(function(items) {
							if (items.type == true) {
								data.push(items)
							}
						})
					}
				})
				_this.collaboratorsForm = data
				this.$emit('personChoose',_this.personInChargeForm,_this.collaboratorsForm)
			},

			visibleChange(item) {
				var _this = this
				_this.selectType = item
				console.log(item)
				console.log('下拉框')
				if(item == true && _this.options.length == 0){
					_this.loadList()
				}
				// if (item == false) {
				//   var data = []
				//   _this.options.forEach(function(item) {
				//     if (item.type == true) {
				//       item.options.forEach(function(items) {
				//         if (items.type == true) {
				//           data.push(items)
				//         }
				//       })
				//     }
				//   })
				//   // _this.selectTitle = data[0].label + '(' + data.length + ')'
				//   _this.$message({
				//     message: '多选成功',
				//     type: 'success'
				//   })
				// }
			},
			inputClick(data) {
				var _this = this
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					console.log(data)
					console.log('我进来了')
					_this.loadList(data)
				}, 500);
				// if (this.inputLoading == true) {
				// 	return
				// }
				// this.inputLoading = true
				// setTimeout(() => {
				// 	console.log(data)
				// 	console.log('我进来了')
				// 	_this.inputLoading = false
				// }, 1000)
			},
		}
	}
</script>

<style scoped>
	.select {
		max-height: 380px;
		overflow: auto;
	}

	.select-search {
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		box-sizing: border-box;
	}

	.select-header {
		padding: 10px 10px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f5f6f8;
		flex: 1;
	}

	.select-header-title {
		flex: 1;
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		margin-right: 10px;
		margin-left: 4px;
	}

	.select-header-icon {
		font-size: 12px;
		color: #333333;
		margin-right: 4px;
		transition: all .5s;
		transform: rotate(-180deg);
	}

	.select-header-iconTwo {
		font-size: 12px;
		color: #333333;
		margin-right: 4px;
		transition: all .5s;
	}

	.select-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		color: #333333;
		justify-content: space-between;
	}

	.select-item-choose {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		background-color: rgba(194, 214, 255, 0.22);
		color: #2c7ef8;
		justify-content: space-between;
	}

	.select-item:hover {
		background-color: rgba(88, 96, 105, 0.06);
	}

	.select-item-logo {
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.select-item-title {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		margin-left: 10px;
		display: block;
		max-width: 220px;
	}

	.select-header-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.select-header-number {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.task-header-actions-icon {
		border-radius: 4px;
		cursor: pointer;
		color: #909aaa;
		font-size: 14px;
	}

	.select-item-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		max-width: 200px;
		margin-right: 40px;
	}

	.select-item-right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.select-item-right-tags {
		margin-left: 10px;
		font-size: 12px;
	}


	.personInCharge {
		width: 360px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e47777;
		border-radius: 4px;
		position: relative;
	}

	.personInCharge-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 4px;
		pointer-events: none;
		background-color: white;
		padding-left: 10px;
		padding-right: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.personInCharge-box-icon {
		color: #C0C4CC;
		font-size: 14px;
		transition: transform .3s;
		cursor: pointer;
		position: absolute;
		right: 10px;
	}

	.transformIcon {
		transform: rotateZ(-180deg);
	}

	.transformIconChoose {
		transform: rotateZ(0deg);
	}

	.personInCharge-box-border {
		border: 1px solid #DCDFE6;
	}

	.personInCharge-box-border-choose {
		border: 1px solid #1890ff;
	}

	.personInCharge-box-title {
		color: #C0C4CC;
		font-size: 14px;
	}

	.personInCharge-content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.personInCharge-content-label {
		color: #909aaa;
		font-size: 12px;
		margin-left: 10px;
	}

	.personInCharge-content-item {
		padding: 3px 6px;
		background-color: #ecedf0;
		border-radius: 3px;
		display: flex;
		align-items: center;
	}

	.personInCharge-content-item-logo {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.personInCharge-content-item-title {
		max-width: 66px;
		font-size: 12px;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.personInCharge-content-logo-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.personInCharge-content-logo-box-title {
		color: #909aaa;
		font-size: 12px;
		margin-left: 2px;
	}

	.refreshRe {
		-webkit-animation: rotate 1.2s linear infinite;
		/*Safari and Chrome*/
	}

	@keyframes rotate {
		0% {

			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			/* IE 9 */
			-moz-transform: rotate(360deg);
			/* Firefox */
			-o-transform: rotate(360deg);
		}

		100% {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			/* IE 9 */
			-moz-transform: rotate(0deg);
			/* Firefox */
			-o-transform: rotate(0deg);
		}
	}

	@-webkit-keyframes rotate {
		0% {
			-moz-transform: rotate(360deg);
		}

		100% {
			-moz-transform: rotate(0deg);
		}
	}
</style>
